<template>
<div>
    <div class="search">
        <input v-model="keywork" class="search-input" type="text" placeholder="输入城市名或拼音" >
    </div>
    <div class="search-conte" ref="search"   v-show="keywork">
        <ul>
            <li class="search-item border-bottom" v-for="item of list" :key="item.id" 
      @click="handlecityclick(item.name)"
       >
                {{item.name}}
            </li>
            <li class="search-item border-bottom" v-show="haslist">
                没有找到匹配数据
            </li>
        </ul>
    </div>
    </div>
</template>
<script>
import {mapMutations}from'vuex'
import BScroll from 'better-scroll'
export default {
 name:'CitySearch',
 props :{
   city:Object
 },
 data (){
     return {
         keywork:'',
         list : [],
         timer : null
     }
 },
 computed:{
     haslist (){
  return !this.list.length
     }
 },
  watch :{
      keywork (){
          if (this.timer){
              clearTimeout(this.timer)
          }
          if (!this.keywork) {
              this.list=[]
              return
          }
          this.timer=setTimeout(() => {
           const result=[]
           for(let i in this.city){
             this.city[i].forEach((value) => {
                if(value.spell.indexOf(this.keywork) > -1 ||
                value.name.indexOf(this.keywork) > -1){
                 result.push(value)   
                } 
             })
           }
           this.list=result
          },100)
      }
  },
  mounted(){
 this.scroll = new BScroll(this.$refs.search)
  },
  methods:{
       handlecityclick(city){
     this.changecity(city)
     this.$router.push('/')  
    },
    ...mapMutations(['changecity'])
    
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/vieble.styl';
    .search
      height :.72rem
      padding :0.1rem
      background :$bgcolor
      .search-input
        box-sizing :border-box
        width :100%
        height :.62rem
        line-height :.62rem
        padding :0.1rem
        text-align :center
        border-radius :.06rem
        color :#666
    .search-conte
      z-index :1
      overflow: hidden
      position :absolute
      top:1.78rem
      left :0
      right :0
      bottom :0 
      background #eee
      .search-item
        line-height :.62rem
        padding-left :.2rem
        background :#fff
        color:#666
          
</style>

